<template>
    <div class="video" @click="onClick">
        <div class="cover">
            <cover-image                             
                :src="pic"
                size="@156w_208h_1c"
                class="cover-img"
            >
            </cover-image >
        </div>
        <div class="content">
            <div class="type">
                <i class="fa fa-tv"></i> {{type}}
            </div>
            <div class="title" v-html="title"></div>
            <div v-if="area" class="area">地区：{{ area }}</div>
            <div v-if="actor" class="actor">演员：{{ formatActor }}</div>
            <div v-if="director" class="director">导演：{{ formatDirector }}</div>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router'
import CoverImage from '@/components/CoverImage'
export default {
    name: 'AlbumCover',
    components: {
        CoverImage
    },
    props: {
        id: {
            type: [Number, String]
        },
        type: {
            type: String
        },
        title: {
            type: String
        },
        pic: {
            type: String
        },
        area: {
            type: String
        },
        actor: {
            type: String
        },
        director: {
            type: String
        }
    },
    setup(props) {
        const router = useRouter()
        const formatContent = value => {
            return value ? value.replace(/[\t\n]/g, ',') : ''
        }
        const formatActor = formatContent(props.actor)
        const formatDirector = formatContent(props.director)
        const onClick = () => {
            router.push({
                name: 'bangumi',
                params: {
                    id: `ss${props.id}`
                }
            })
        }
        return {
            formatActor,
            formatDirector,
            onClick
        }
    }
}
</script>

<style lang="scss" scoped>
    .video {
        display: flex;
        padding: 10px;
        .cover {
            width: 78px;
            height: 104px;
            &-img {
                padding-bottom: (208 / 156) * 100%;
            }
        }    
        .content {
            width: 260px;
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            font-size: 12px;
            color: $color-text-primary;
            .fa{
                margin-right: 5px;
                font-size: 14px;
            }
            div {
                margin-top: 5px;
                @include max-lines(1);
            }
        }
        .area,.actor,.director{
            color: $color-text-secondary;
        }
        .title {
            @include max-lines(2);
            :deep .keyword {
                color: $theme-color;
                font-style: normal;
            }
        }
    }
</style>